<!--这是商品配置-首页轮播图详情组件-->
<template>
  <!-- <div>
    <p class="filter"></p>
    <div class="alertBox">
	    <h3><span>增加图片</span><em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em></h3>
	    <div class="formBox" style="border-bottom: 1px solid #ddd; padding: 10px 0;">
		    <div class="label-div"><label ><span style="color: red;">*</span>序号:</label><el-input v-model="order" placeholder="请输入序号" style="width: 300px"></el-input></div>
		    <div class="label-div"><label><span style="color: red;">*</span>链接:</label><el-input v-model="imgLink" placeholder="请输入链接" style="width: 300px"></el-input></div>
	    </div>
	    <div class="label-div" style="overflow: hidden;line-height: 50px;">
	    	<label style="float: left;"><span style="color: red;">*</span>附件:</label>
	    	<el-upload style="width: 300px;float: left;"
				  class="upload-demo"
				  action="https://jsonplaceholder.typicode.com/posts/"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :before-remove="beforeRemove"
				  multiple
				  :limit="1"
				  :on-exceed="handleExceed"
				  :file-list="fileList">
				  <el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
	    </div>
	    <p style="text-align: center;margin: 20px 0;">
			<el-button type="primary" icon="el-icon-check">创建</el-button>
			<el-button type="info" @click="close">取消</el-button>
		</p>
    </div>
  </div> -->
  <div class="app-container">
    <el-form :model="postForm" v-loading="formLoading" :rules="rules" ref="postForm" label-width="220px" label-position="right">
      <el-form-item label="排序号：" prop="sortNum">
        <el-input v-model="postForm.sortNum" placeholder="请输入序号" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="链接：" prop="link">
        <el-input v-model="postForm.imgLink" placeholder="请输入链接" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="图片(宽640*高320)：" prop="upload">
        <el-upload style="width: 650px;"
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="postForm.fileList"
          :limit="1"
          :on-exceed="handleExceed"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
        <el-button type="info">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
const postForm = {
  order: null, // 序号
  imgLink: null, // 图片链接
  fileList: [] // 图片附件
}
const rules = {
  sortNum: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
  link: [{ required: true, message: '请输入图片链接', trigger: 'blur' }],
  upload: [{ required: true, message: '请上传图片', trigger: 'change' }]
}
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: Object.assign({}, postForm),
      rules,
      formLoading: false,
      btnLoading: false
    }
  },
  methods: {
    submitForm() {},
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>
<style scoped>

</style>